<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="../css/index.css" />
</head>

<body>

    <h1>CSS display 属性</h1>

    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank" href="https://www.w3school.com.cn/cssref/pr_class_display.asp">CSS display 属性</a></li>
        <li><a target="_blank"
                href="https://blog.csdn.net/zhanglir333/article/details/79178370">HTML行内元素、块状元素、行内块状元素的区别</a></li>
    </ul>

    <h2>摘抄</h2>
    <p>display 属性规定元素应该生成的框的类型。</p>

    <h2>可能取值</h2>
    <ul>
        <li><strong>none</strong> 此元素不会被显示。</li>
        <li><strong>block</strong> 此元素将显示为块级元素，此元素前后会带有换行符。</li>
        <li><strong>inline</strong> 默认。此元素会被显示为内联元素，元素前后没有换行符。</li>
        <li><strong>inline-block</strong> 行内块元素。</li>
    </ul>

    <h2>block-块状元素</h2>
    <ol>
        <li>能够识别宽高</li>
        <li>margin和padding的上下左右均对其有效</li>
        <li>可以自动换行</li>
        <li>多个块状元素标签写在一起，默认排列方式为从上至下</li>
    </ol>


    <h2>inline-内联元素</h2>
    <ol>
        <li>设置宽高无效</li>
        <li>对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效</li>
        <li>不会自动进行换行</li>
    </ol>

    <h2>inline-block-行内块元素</h2>
    <ol>
        <li>能够识别宽高</li>
        <li>不会自动进行换行</li>
        <li>默认排列方式为从左到右</li>
    </ol>

</body>

</html>